<template>
	<view class="outBox">
		<u-navbar leftText="预约座位" :autoBack="true" bgColor="#cfdbe6"></u-navbar>
		<view class="bgBox" :style="{backgroundImage: `url(${baseImgUrl}newTable/bg1.png)`}"></view>

		<view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
			<view class="topBox">
				<view class="menus">
					<view class="menu" :class="[curShowType === 1 ? 'active' : '']" @click="curShowType = 1">
						<text>大厅</text>
					</view>
					<view class="menu" :class="[curShowType === 2 ? 'active' : '']" @click="showWait">
						<text>包厢</text>
					</view>
				</view>
				<view class="texts">
					<view class="text">
						<view class="circle"></view>
						<text>可选</text>
					</view>
					<view class="text">
						<view class="circle circle1"></view>
						<text>已选</text>
					</view>
					<view class="text">
						<view class="circle circle2"></view>
						<text>不可选</text>
					</view>
				</view>
			</view>

			<view class="cont-box" v-if="curShowType === 1"
				:style="{backgroundImage: `url(${baseImgUrl}newTable/bg2.png)`}">
				<view class="headBox">
					<view class="img1">
						<image :src="`${baseImgUrl}newTable/img1.png`" mode="widthFix" />
					</view>
					<view class="setImg setImg1" @click="handleChoiceBox('S01')">
						<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S01'" mode="widthFix" />
						<image src="/static/newTable/set3.png"
							v-show="curTable.counterNo !== 'S01' && getCurIsOccupied('S01')" mode="widthFix" />
						<image src="/static/newTable/set1.png"
							v-show="curTable.counterNo !== 'S01' && !getCurIsOccupied('S01')" mode="widthFix" />
						<text>S01</text>
					</view>
					<view class="setImg setImg2" @click="handleChoiceBox('S02')">
						<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S02'" mode="widthFix" />
						<image src="/static/newTable/set3.png"
							v-show="curTable.counterNo !== 'S02' && getCurIsOccupied('S02')" mode="widthFix" />
						<image src="/static/newTable/set1.png"
							v-show="curTable.counterNo !== 'S02' && !getCurIsOccupied('S02')" mode="widthFix" />
						<text>S02</text>
					</view>
					<view class="setImg setImg3" @click="handleChoiceBox('S03')">
						<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S03'" mode="widthFix" />
						<image src="/static/newTable/set3.png"
							v-show="curTable.counterNo !== 'S03' && getCurIsOccupied('S03')" mode="widthFix" />
						<image src="/static/newTable/set1.png"
							v-show="curTable.counterNo !== 'S03' && !getCurIsOccupied('S03')" mode="widthFix" />
						<text>S03</text>
					</view>
					<view class="setImg setImg4" @click="handleChoiceBox('S04')">
						<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S04'" mode="widthFix" />
						<image src="/static/newTable/set3.png"
							v-show="curTable.counterNo !== 'S04' && getCurIsOccupied('S04')" mode="widthFix" />
						<image src="/static/newTable/set1.png"
							v-show="curTable.counterNo !== 'S04' && !getCurIsOccupied('S04')" mode="widthFix" />
						<text>S04</text>
					</view>
					<view class="setImg setImg5" @click="handleChoiceBox('S05')">
						<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S05'" mode="widthFix" />
						<image src="/static/newTable/set3.png"
							v-show="curTable.counterNo !== 'S05' && getCurIsOccupied('S05')" mode="widthFix" />
						<image src="/static/newTable/set1.png"
							v-show="curTable.counterNo !== 'S05' && !getCurIsOccupied('S05')" mode="widthFix" />
						<text>S05</text>
					</view>
					<view class="table" :class="['table' + (index+1)]" v-for="(item,index) in center2"
						@click="handleChoiceBox(item)">
						<text>{{ item }}</text>
						<image :src="`${baseImgUrl}newTable/table2.png`" v-show="curTable.counterNo === item"
							mode="widthFix" />
						<image :src="`${baseImgUrl}newTable/table3.png`"
							v-show="curTable.counterNo !== item && getCurIsOccupied(item)" mode="widthFix" />
						<image :src="`${baseImgUrl}newTable/table1.png`"
							v-show="curTable.counterNo !== item && !getCurIsOccupied(item)" mode="widthFix" />
					</view>
				</view>
				<view class="img2">
					<image :src="`${baseImgUrl}newTable/img2.png`" mode="widthFix" />
				</view>
				<view class="cont">
					<view class="left">
						<view class="setImg setImg7" @click="handleChoiceBox('S07')">
							<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S07'"
								mode="widthFix" />
							<image src="/static/newTable/set3.png"
								v-show="curTable.counterNo !== 'S07' && getCurIsOccupied('S07')" mode="widthFix" />
							<image src="/static/newTable/set1.png"
								v-show="curTable.counterNo !== 'S07' && !getCurIsOccupied('S07')" mode="widthFix" />
							<text>S07</text>
						</view>
						<view class="shafas">
							<view class="shafa shafa1" v-for="item in leftData" @click="handleChoiceBox(item)">
								<image :src="`${baseImgUrl}newTable/shafa2.png`" v-show="curTable.counterNo === item"
									mode="widthFix" />
								<image :src="`${baseImgUrl}newTable/shafa3.png`"
									v-show="curTable.counterNo !== item && getCurIsOccupied(item)" mode="widthFix" />
								<image :src="`${baseImgUrl}newTable/shafa1.png`"
									v-show="curTable.counterNo !== item && !getCurIsOccupied(item)" mode="widthFix" />
								<text>{{ item }}</text>
							</view>
						</view>
						<view class="setImg" @click="handleChoiceBox('S06')">
							<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S06'"
								mode="widthFix" />
							<image src="/static/newTable/set3.png"
								v-show="curTable.counterNo !== 'S06' && getCurIsOccupied('S06')" mode="widthFix" />
							<image src="/static/newTable/set1.png"
								v-show="curTable.counterNo !== 'S06' && !getCurIsOccupied('S06')" mode="widthFix" />
							<text>S06</text>
						</view>
					</view>
					<view class="center">
						<view class="items">
							<view class="item" :class="['item' + index]" v-for="(item,index) in center1">
								<view class="setImg" v-for="one in item" @click="handleChoiceBox(one)">
									<image src="/static/newTable/set2.png" v-show="curTable.counterNo === one"
										mode="widthFix" />
									<image src="/static/newTable/set3.png"
										v-show="curTable.counterNo !== one && getCurIsOccupied(one)" mode="widthFix" />
									<image src="/static/newTable/set1.png"
										v-show="curTable.counterNo !== one && !getCurIsOccupied(one)" mode="widthFix" />
									<text>{{ one }}</text>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="one">
								<view class="setImg" v-for="item in center4" @click="handleChoiceBox(item)">
									<image src="/static/newTable/set2.png" v-show="curTable.counterNo === item"
										mode="widthFix" />
									<image src="/static/newTable/set3.png"
										v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
										mode="widthFix" />
									<image src="/static/newTable/set1.png"
										v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
										mode="widthFix" />
									<text>{{ item }}</text>
								</view>
							</view>
							<view class="one one1">
								<view class="setImg" v-for="item in center5" @click="handleChoiceBox(item)">
									<image src="/static/newTable/set2.png" v-show="curTable.counterNo === item"
										mode="widthFix" />
									<image src="/static/newTable/set3.png"
										v-show="curTable.counterNo !== item && getCurIsOccupied(item)"
										mode="widthFix" />
									<image src="/static/newTable/set1.png"
										v-show="curTable.counterNo !== item && !getCurIsOccupied(item)"
										mode="widthFix" />
									<text>{{ item }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="setImg setImg8" @click="handleChoiceBox('S08')">
							<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S08'"
								mode="widthFix" />
							<image src="/static/newTable/set3.png"
								v-show="curTable.counterNo !== 'S08' && getCurIsOccupied('S08')" mode="widthFix" />
							<image src="/static/newTable/set1.png"
								v-show="curTable.counterNo !== 'S08' && !getCurIsOccupied('S08')" mode="widthFix" />
							<text>S08</text>
						</view>
						<view class="shafas">
							<view class="shafa shafa1" v-for="item in rightData" @click="handleChoiceBox(item)">
								<image :src="`${baseImgUrl}newTable/shafa2.png`" v-show="curTable.counterNo === item"
									mode="widthFix" />
								<image :src="`${baseImgUrl}newTable/shafa3.png`"
									v-show="curTable.counterNo !== item && getCurIsOccupied(item)" mode="widthFix" />
								<image :src="`${baseImgUrl}newTable/shafa1.png`"
									v-show="curTable.counterNo !== item && !getCurIsOccupied(item)" mode="widthFix" />
								<text>{{ item }}</text>
							</view>
						</view>
						<view class="setImg" @click="handleChoiceBox('S07')">
							<image src="/static/newTable/set2.png" v-show="curTable.counterNo === 'S07'"
								mode="widthFix" />
							<image src="/static/newTable/set3.png"
								v-show="curTable.counterNo !== 'S07' && getCurIsOccupied('S07')" mode="widthFix" />
							<image src="/static/newTable/set1.png"
								v-show="curTable.counterNo !== 'S07' && !getCurIsOccupied('S07')" mode="widthFix" />
							<text>S07</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cont-box cont-box2" v-else :style="{backgroundImage: `url(${baseImgUrl}newTable/bg2.png)`}">
				<view class="cont-box2-left">
					<view class="cont-box2-one" @click="handleChoiceBox('222')">
						<image v-show="curTable.counterNo === '222'" :src="`${baseImgUrl}newTable/a2.png`"
							mode="widthFix" />
						<image v-show="curTable.counterNo !== '222' && getCurIsOccupied('222')"
							:src="`${baseImgUrl}newTable/a3.png`" mode="widthFix" />
						<image v-show="curTable.counterNo !== '222' && !getCurIsOccupied('222')"
							:src="`${baseImgUrl}newTable/a1.png`" mode="widthFix" />
					</view>
					<view class="cont-box2-one" @click="handleChoiceBox('333')">
						<image v-show="curTable.counterNo === '333'" :src="`${baseImgUrl}newTable/b2.png`"
							mode="widthFix" />
						<image v-show="curTable.counterNo !== '333' && getCurIsOccupied('333') "
							:src="`${baseImgUrl}newTable/b3.png`" mode="widthFix" />
						<image v-show="curTable.counterNo !== '333' && !getCurIsOccupied('333') "
							:src="`${baseImgUrl}newTable/b1.png`" mode="widthFix" />
					</view>
					<view class="cont-box2-one" @click="handleChoiceBox('555')">
						<image v-show="curTable.counterNo === '555'" :src="`${baseImgUrl}newTable/b2.png`"
							mode="widthFix" />
						<image v-show="curTable.counterNo !== '555' && getCurIsOccupied('555') "
							:src="`${baseImgUrl}newTable/b3.png`" mode="widthFix" />
						<image v-show="curTable.counterNo !== '555' && !getCurIsOccupied('555') "
							:src="`${baseImgUrl}newTable/b1.png`" mode="widthFix" />
					</view>
				</view>
				<view class="cont-box2-right">
					<view class="cont-box2-one" @click="handleChoiceBox('666')">
						<image v-if="curTable.counterNo === '666'" :src="`${baseImgUrl}newTable/c2.png`"
							mode="widthFix" />
						<image v-if="curTable.counterNo !== '666' && getCurIsOccupied('666') "
							:src="`${baseImgUrl}newTable/c3.png`" mode="widthFix" />
						<image v-if="curTable.counterNo !== '666' && !getCurIsOccupied('666') "
							:src="`${baseImgUrl}newTable/c1.png`" mode="widthFix" />
					</view>
					<view class="cont-box2-one" @click="handleChoiceBox('888')">
						<image v-if="curTable.counterNo === '888'" :src="`${baseImgUrl}newTable/c2.png`"
							mode="widthFix" />
						<image v-if="curTable.counterNo !== '888' && getCurIsOccupied('888') "
							:src="`${baseImgUrl}newTable/c3.png`" mode="widthFix" />
						<image v-if="curTable.counterNo !== '888' && !getCurIsOccupied('888') "
							:src="`${baseImgUrl}newTable/c1.png`" mode="widthFix" />
					</view>
				</view>
			</view>

			<view class="bottom-box">
				<view class="top-box">
					<view class="item item1">
						<view class="tit">
							<text>选择预订方式</text>
							<image class="iconImg" @click.stop="handleShowInfoBox" :src="`/static/reservation/img2.png`"
								mode="widthFix">
							</image>
						</view>
						<view class="btns">
							<view class="btn" @click="curPayType = 1"
								v-if="curTable.counterStatus == 1 || curTable.counterStatus == 2"
								:class="[curPayType == 1 ? 'active' : '']">
								<text>秒杀价</text>
							</view>
							<view class="btn" @click="curPayType = 2" v-if="curTable.counterStatus == 2"
								:class="[curPayType == 2 ? 'active' : '']">
								<text>竞价</text>
							</view>
						</view>
					</view>
					<view class="item item2">
						<view class="tit">
							<text>选择卡座</text>
						</view>
						<view class="btn2" v-show="curTable != ''"
							:style="{'backgroundImage':`url(${baseImgUrl}newTable/bg3.png)`}">
							<view class="info">
								<text>{{ curTable.counterNo }}</text>
								<text>8-10人</text>
							</view>
							<view class="info2">
								<text>{{ curTable.counterStatus == 2 && curPayType != 1 ? '当前最高报价' : '最低消费' }}</text>
								<text>{{
                    curTable.counterStatus == 2 && curPayType != 1 ? curTable.maxBiddingPrice : curTable.fixedPrice
                  }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btnOut" @click="handleSubmit">
					<view class="btn">
						确认选座
					</view>
				</view>
			</view>
		</view>
		<DiaBox ref="diaBox" @comfireFunc="comfireFunc" title="订台说明" :content="contentDesc" :isClose="false"
			:show-cancel="false" :showBtns="true" />
	</view>
</template>

<script>
	import {
		getDateForYmd,
		getWXStatusHeight
	} from '@/utils/index.js'

	import DiaBox from "@/components/diaBox/index.vue";

	import {
		getDicts,
		getTableListApi,
	} from '../../api/api'

	export default {
		components: {
			DiaBox
		},
		data() {
			return {
				// 押金
				tableList: [],
				menuHeight: '',
				curTable: '',
				// 已经有人的卡座列表
				havedList: [],
				// 选择支付方式 1一口价 2竞价
				curPayType: 0,
				// 大厅1，包厢2
				curShowType: 1,
				choiceBox: null, // 选择包厢
				baseImgUrl: this.$baseImgUrl,
				leftData: ['V01', 'V03', 'V06', 'V09'],
				rightData: ['V02', 'V05', 'V08', 'V10'],
				center1: [
					['T01', 'T08', 'T16', 'T22', 'T30', 'T37'],
					['T06', 'T12', 'T20', 'T28', 'T35'],
					['T02', 'T09', 'T17', 'T23', 'T31', 'T39'],
					['T03', 'T10', 'T18', 'T26', 'T32', 'T50'],
					['T07', 'T15', 'T21', 'T29', 'T36'],
					['T05', 'T11', 'T19', 'T27', 'T33', 'T51'],
				],
				center2: ['A01', 'A02', 'A03'],
				center4: ['S08', 'S10', 'S12'],
				center5: ['S09', 'S11'],
				timer: '',
				timer2: '',
				isFirstOpen: {
					flag: '是',
					date: ''
				},
				// 押金金额
				deposit: 0,
				contentDesc: `订台需支付0元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
			}
		},
		async onLoad() {
			let obj = getWXStatusHeight()
			this.menuHeight = obj.menuHeight
			await this.getTableList()

			const isFirstOpen = uni.getStorageSync('isFirstOpen')
			// 判断日期是否是今天
			if (isFirstOpen.flag == '否' && isFirstOpen.date == getDateForYmd()) this.isFirstOpen.flag = '否'
			else {
				await this.getDictData()
				this.handleShowInfoBox()
			}
		},
		onReady() {

		},
		methods: {
			// 获取字典数据
			async getDictData() {
				const res = await getDicts("bidding_info_dict")
				if (res.code == 200) {
					this.deposit = (parseInt(res.data[0].dictValue) / 100) || 0
				}
				this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
			},
			comfireFunc() {
				if (this.isFirstOpen.flag == '是') {
					// 判断时间是否过去5秒
					if (Date.now() - this.timer < 5000) {
						this.$refs.diaBox.show = true
						uni.$u.toast('阅读5秒可关闭')
					} else {
						const date = getDateForYmd()
						console.log(date, "date")
						this.isFirstOpen.flag = '否'
						this.isFirstOpen.date = date
						this.$refs.diaBox.show = false
						uni.setStorageSync('isFirstOpen', this.isFirstOpen)
					}
				} else {
					this.$refs.diaBox.show = false
				}
			},
			handleShowInfoBox() {
				this.$refs.diaBox.show = true
				// 记录当前时间
				this.timer = Date.now()
				this.isFirstOpen.flag = '是'
				const date = getDateForYmd()
				console.log(date, "date")
				this.isFirstOpen.date = date
				uni.setStorageSync('isFirstOpen', this.isFirstOpen)

				// 开启定时器，刷新提示语 每一秒刷新一次 5秒后结束
				this.timer2 = setInterval(() => {
					// 剩余时间
					let time = 5 - Math.floor((Date.now() - this.timer) / 1000)
					this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）` +
						time + 's后可关闭'

					if (time <= 0) {
						clearInterval(this.timer2)
						this.contentDesc = `订台需支付${this.deposit}元订金，到店成功消费后，原路退还订金。超时/未到店，自动取消订台，订金转入电子账户（有效期30天）`
					}
				}, 1000)
			},
			// 获取当前包厢是否被占用
			getCurIsOccupied(num) {
				const one = this.tableList.find(item => item.counterNo == num)
				if (one?.counterStatus) {
					return one.counterStatus == 99
				} else {
					return false
				}
			},
			getOthterImgUrl(item) {
				if (this.curTable.counterNo == item.counterNo) return item.url2
				else if (this.getHaveData(item.counterNo)) return item.url1
				return item.url
			},
			// 获取卡座列表
			async getTableList() {
				const date = new Date()
				const month = date.getMonth().toString().length == 1 ? '0' + (date.getMonth() + 1) : (date.getMonth() +
					1)
				const day = date.getDate().toString().length == 1 ? '0' + date.getDate() : date.getDate()
				const fullTime = date.getFullYear() + '-' + month + '-' + day
				const res = await getTableListApi()
				if (res.data.length > 0) {
					this.tableList = res.data.map(item => {
						if (item.counterNo == 'A01') {
							return {
								...item,
								url: this.$baseImgUrl + '/reservation/a01.png',
								url1: this.$baseImgUrl + '/reservation/a01_1.png',
								url2: this.$baseImgUrl + '/reservation/a01_2.png',
								showName: false,
							}
						} else if (item.counterNo == 'A02') {
							return {
								...item,
								url: this.$baseImgUrl + '/reservation/a02.png',
								url1: this.$baseImgUrl + '/reservation/a02_1.png',
								url2: this.$baseImgUrl + '/reservation/a02_2.png',
								showName: false,
							}
						} else if (item.counterNo == 'A03') {
							return {
								...item,
								url: this.$baseImgUrl + '/reservation/a03.png',
								url1: this.$baseImgUrl + '/reservation/a03_1.png',
								url2: this.$baseImgUrl + '/reservation/a03_2.png',
								showName: false,
							}
						} else {
							return {
								...item,
								showName: true
							}
						}
					})

					// 已选卡座
					this.havedList = this.tableList.filter(item => item.counterStatus == 99).map(item => item
						.counterNo)
				}
				console.log(res, "res");
			},
			// 选择包厢
			handleChoiceBox(num) {
				console.log(num, "num")
				this.curPayType = 0
				this.curTable = this.tableList.find(item => item.counterNo == num)
				if (!this.curTable) {
					this.$toast('未配置该卡桌信息')
				}
				if (this.curTable.counterStatus == 99) {
					this.curTable = ''
					return this.$toast('当前卡座已选')
				}

			},
			// 确认选择座位
			handleSubmit() {
				if (this.curPayType == 0) {
					return this.$toast("请选择支付方式")
				}
				if (!this.curTable?.counterNo) return this.$toast("请选择卡座")
				uni.setStorageSync('curTable', this.curTable)
				// 一口价
				if (this.curPayType == 1) {
					this.getnav("index?tableName=" + this.curTable.counterNo + '&counterDetailId=' + this.curTable.id +
						'&fixedPrice=' + this.curTable.fixedPrice + '&price=' + this.curTable.bookingDepositPrice)
				} else {
					this.getnav("competition?tableName=" + this.curTable.counterNo + '&counterDetailId=' + this.curTable
						.id + '&maxBiddingPrice=' + this.curTable.maxBiddingPrice + '&price=' + this.curTable
						.biddingDepositPrice + '&isJoinBidding=' + this.curTable.isJoinBidding + '&isExistBidding=' +
						this.curTable.isExistBidding)
				}
			},
			getHaveData(counterNo) {
				return this.havedList.findIndex(one => one == counterNo) != -1
			},
			// 点击table
			handleTable(item) {
				if (this.getHaveData(item.counterNo)) return this.$toast('当前卡座不可选')
				this.curTable = item
			},
			showWait() {
				uni.$u.toast('敬请期待')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.iconImg {
		width: 27rpx;
		height: 27rpx;
	}

	image {
		width: auto;
		height: auto;
	}

	.cont-box2-one {
		position: relative;
		height: 300rpx;

		image {}
	}

	.cont-box2 {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0 50rpx 27rpx !important;

		.cont-box2-left {
			width: 200rpx;

			image {
				width: 200rpx;
			}
		}

		.cont-box2-right {
			margin-left: 80rpx;
			width: 250rpx;

			image {
				width: 250rpx;
			}
		}
	}

	::v-deep .u-navbar {
		z-index: 9999;
	}

	page {
		background: #d6e0e9;
	}

	.btnOut {
		border-radius: 64rpx;
		margin-top: 30rpx;
		box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

		.btn {
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			background: #0FC6C2;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconImg {
				width: 32rpx;
				margin-left: 8rpx;
			}

			.myText {
				text {
					font-weight: 600;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

	}


	.bgBox {
		height: 100vh;
		width: 100vw;
		background-size: 100% 100%;
		position: fixed;
		top: 0;
	}

	.bottom-box {
		width: 682rpx;
		background: #E6F2FF;
		border-radius: 60rpx;
		backdrop-filter: blur(7px);
		margin-top: 20rpx;
		padding: 30rpx;

		.top-box {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			min-height: 100rpx;

			.item {
				.tit {
					text-align: center;
					display: flex;
					align-items: center;

					text {
						font-size: 25rpx;
						font-weight: bolder;
						margin-right: 5rpx;
					}
				}

				.btns {
					display: flex;
					justify-content: space-between;

					.btn {
						width: 134rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;
						border-radius: 15rpx;

						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
						}
					}

					.active {
						background: #bacfde;
					}
				}
			}

			.item1 {
				border-right: 1px solid #D2D4D8;
				padding-right: 26rpx;

				.tit {
					margin-bottom: 35rpx;
				}
			}

			.item2 {
				padding-left: 26rpx;

				.btn2 {
					background-size: 100% 100%;
					padding: 18rpx 24rpx;
					margin-top: 18rpx;

					.info {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 36rpx;
								color: #FFFFFF;
							}

							&:nth-child(2) {
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
					}

					.info2 {
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 6rpx;
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}

	.center {
		padding-top: 70rpx;

		.bottom {
			.one {
				display: flex;
				width: 300rpx;
				justify-content: space-between;
				margin: 0 auto;
			}

			.one1 {
				width: 200rpx;
			}
		}

		.items {
			display: flex;

			.item {
				.setImg {
					margin-bottom: 15rpx;
				}
			}

			.item1,
			.item4 {
				margin-top: 35rpx;
			}

			.item2 {
				margin-right: 20rpx;
			}

			.item3 {
				margin-left: 20rpx;
			}
		}
	}

	.setImg {
		position: relative;
		width: 60rpx;
		height: 60rpx;

		text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: #0d0d0d;
			font-size: 16rpx;
		}

		image {
			width: 60rpx;
		}
	}

	.shafa {
		position: relative;
		height: 102rpx;

		image {
			width: 72rpx;
			height: 102rpx;
		}

		text {
			position: absolute;
			top: 48%;
			right: 7rpx;
			transform: translateY(-50%);
			color: #0d0d0d;
			font-size: 14rpx;
		}
	}

	.cont-box {
		padding: 0 50rpx;
		background-size: 100% 100%;
		width: 680rpx;
		height: 954rpx;
		margin: 100rpx auto 20rpx;
		box-sizing: border-box;
		overflow: hidden;

		.cont {
			display: flex;
			justify-content: space-between;
			margin-top: -50rpx;
		}

		.left,
		.right {
			width: fit-content;

			.shafas {
				margin: 20rpx 0;
			}
		}

		.right {
			.shafa {
				image {
					transform: rotate(180deg);
				}

				text {
					right: auto;
					left: 7rpx;
				}
			}
		}

	}

	.img2 {
		text-align: center;
		margin-top: -15rpx;

		image {
			width: 200rpx;
		}
	}

	.setImg7 {
		left: 100rpx;
	}

	.setImg8 {
		right: 100rpx;
	}

	.headBox {
		position: relative;
		width: 380rpx;
		margin: 40rpx auto 0;

		.setImg {
			position: absolute;
			bottom: 10rpx;
		}

		.setImg1 {
			left: 0;
		}

		.setImg2 {
			right: 0;
		}

		.setImg3 {
			left: 98rpx;
		}

		.setImg4 {
			left: 158rpx;
		}

		.setImg5 {
			right: 98rpx;
		}



		.img1 {
			image {
				//width: 385rpx;
				width: 380rpx;
			}
		}

		.table {
			position: absolute;

			text {
				position: absolute;
				bottom: 44rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #55688d;
				font-size: 18rpx;
			}

			image {
				width: 138rpx;
			}
		}

		.table1 {
			top: 46rpx;
			left: 20rpx;
			transform: rotate(-51deg);
		}

		.table2 {
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}

		.table3 {
			top: 46rpx;
			right: 20rpx;
			transform: rotate(51deg);
		}
	}

	.topBox {
		display: flex;
		justify-content: space-between;

		.texts {
			display: flex;

			.text {
				display: flex;
				align-items: center;
				margin-left: 32rpx;

				.circle {
					width: 16rpx;
					height: 16rpx;
					background: #D8D8D8;
					margin-right: 8rpx;
					border-radius: 50%;
				}

				.circle1 {
					background: #0FC6C2;
				}

				.circle2 {
					background: #ff80ff;
				}
			}

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.menus {
			display: flex;
			align-items: flex-start;

			.menu {
				&:nth-child(1) {
					margin-right: 50rpx;
				}
			}

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
			}

			.active {
				position: relative;

				&:after {
					content: '';
					width: 56rpx;
					height: 6rpx;
					background: #0FC6C2;
					border-radius: 4rpx;
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				text {
					color: #212429;
				}
			}
		}
	}

	//.bgBox {
	//  height: 100vh;
	//  min-height: 775px;
	//  width: 100vw;
	//  background-size: 100% 100%;
	//  position: fixed;
	//  top: 0;
	//}

	.content {
		position: relative;
		box-sizing: border-box;
		padding: 40rpx 30rpx;
	}

	.left-slot {
		color: #1c2128;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {}
</style>